@use "../scss/concaveRounded" as ccr;
@use "../scss/base" as base;
@use "../scss/parabola" as pb;
@use "../scss/slider" as *;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
}
.custom-1 {
  width: 180px;
  height: 180px;
  @include ccr.concaveRounded(40px, 6px, #df73a0);
}
.mask-inset-circle {
  width: 200px;
  height: 180px;
  @include ccr.maskInsetCircle();
  display: flex;
  justify-content: center;
  align-items: center;
}
.ball {
  position: absolute;
  top: 0;
  left: 0;
  @include base.circle(20px, red);
  @include pb.parabola(3s, 300px, 500px);
}

.filed {
  --lawn: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.5) 10% 100%)
    center / 10% 100%;
  --dj: linear-gradient(to right, #43a63c calc(18em - 2px), transparent 0) 0
      center/calc(100% - 18em + 2px) calc(44em - 4px) repeat-x,
    linear-gradient(to right, #fff 18em, transparent 0) 0
      center/calc(100% - 18em) 44em repeat-x;
  --sj: linear-gradient(to right, #43a63c calc(6em - 2px), transparent 0) 0
      center/calc(100% - 6em + 2px) calc(20em - 4px) repeat-x,
    linear-gradient(to right, #fff 6em, transparent 0) 0 center/calc(100% - 6em)
      20em repeat-x;
  --door: linear-gradient(to right, #43a63c calc(3em - 4px), transparent 0)
      calc(-3em + 2px) center / calc(100% + 3em) calc(8em - 4px) repeat-x,
    linear-gradient(to right, #fff 3em, transparent 0) -3em center/calc(
        100% + 3em
      ) 8em repeat-x;
  --ml: linear-gradient(#fff, #fff) center / 2px 100% no-repeat;
  --mc: radial-gradient(
      closest-side circle,
      #fff 2px,
      transparent 0 calc(100% - 2px),
      #fff 0 100%,
      transparent 0
    )
    center / 20em no-repeat;
  --ar: radial-gradient(
      circle at 12em center,
      transparent calc(10em - 2px),
      #fff 0 10em,
      transparent 0
    )
    0 center/calc(100% - 24em) 100%;
  --point: radial-gradient(circle at 12em center, #fff 2px, transparent 0) 0
    center/calc(100% - 24em) 100%;
  --co: radial-gradient(
      circle at 1em 1em,
      transparent calc(1em - 2px),
      #fff 0 1em,
      transparent 0
    ) -1em -1em/100% 100% content-box;

  font-size: 5px;
  width: 115em;
  height: 74em;
  background: var(--lawn), var(--co), var(--point), var(--door), var(--sj),
    var(--dj), var(--ar), var(--ml), var(--mc), #43a63c;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal,
    normal, normal, normal, normal, normal, normal, normal, normal, normal,
    normal, normal, normal, normal, normal;
  outline: 2px solid #fff;
  outline-offset: -5em;
  border: 5em solid transparent;
}

.text {
  -webkit-text-stroke: 6px rgb(51, 51, 51);
}
label {
  @extend %slider;
}
